<template>
  <div class="chess-board-container">
    <!-- 棋盘主体 -->
    <div class="board-wrapper">
      <!-- 棋盘格子 -->
      <div class="chess-board">
        <div 
          v-for="row in 10" 
          :key="`row-${row - 1}`"
          class="chess-row"
        >
          <ChessCell
            v-for="col in 9"
            :key="`cell-${row - 1}-${col - 1}`"
            :row="row - 1"
            :col="col - 1"
            :piece="getPieceAt(row - 1, col - 1)"
            :is-selected="isSelected(row - 1, col - 1)"
            :is-valid-move="isValidMove(row - 1, col - 1)"
            :is-last-move="isLastMove(row - 1, col - 1)"
            :is-in-check="isInCheck(row - 1, col - 1)"
            :show-move-hints="showMoveHints"
            @click="handleCellClick"
          />
        </div>
        
        <!-- 河界标识 -->
        <div class="river-divider">
          <div class="river-text">楚河</div>
          <div class="river-text">汉界</div>
        </div>
      </div>
    </div>

    <!-- 状态信息显示 -->
    <div v-if="showStatus" class="board-status">
      <div class="current-player">
        <span class="status-label">当前执子：</span>
        <span :class="`player-${currentPlayer}`">
          {{ currentPlayer === 'red' ? '红方' : '黑方' }}
        </span>
      </div>
      
      <div v-if="gameStatus !== 'playing'" class="game-status">
        <span class="status-label">游戏状态：</span>
        <span class="status-value">{{ getStatusText() }}</span>
      </div>
      
      <div class="move-count">
        <span class="status-label">回合数：</span>
        <span class="status-value">{{ Math.ceil(moveCount / 2) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import ChessCell from './ChessCell.vue';

const props = defineProps({
  // 棋盘数据
  board: {
    type: Array,
    required: true
  },
  
  // 游戏状态
  currentPlayer: {
    type: String,
    required: true
  },
  
  gameStatus: {
    type: String,
    default: 'playing'
  },
  
  moveCount: {
    type: Number,
    default: 0
  },
  
  // 交互状态
  selectedPosition: {
    type: Object,
    default: null
  },
  
  validMoves: {
    type: Array,
    default: () => []
  },
  
  lastMove: {
    type: Object,
    default: null
  },
  
  checkPositions: {
    type: Array,
    default: () => []
  },
  
  // 显示选项
  showMoveHints: {
    type: Boolean,
    default: true
  },
  
  showStatus: {
    type: Boolean,
    default: true
  },
  
  showCoordinates: {
    type: Boolean,
    default: true
  },
  
  // 禁用交互
  disabled: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['cellClick', 'pieceSelect', 'move']);

// 计算属性
const getPieceAt = (row, col) => {
  return props.board[row]?.[col] || null;
};

const isSelected = (row, col) => {
  if (!props.selectedPosition) return false;
  return props.selectedPosition.row === row && props.selectedPosition.col === col;
};

const isValidMove = (row, col) => {
  return props.validMoves.some(move => move.row === row && move.col === col);
};

const isLastMove = (row, col) => {
  if (!props.lastMove) return false;
  return (props.lastMove.from.row === row && props.lastMove.from.col === col) ||
         (props.lastMove.to.row === row && props.lastMove.to.col === col);
};

const isInCheck = (row, col) => {
  return props.checkPositions.some(pos => pos.row === row && pos.col === col);
};

const getStatusText = () => {
  const statusMap = {
    playing: '进行中',
    checkmate: '将死',
    stalemate: '困毙',
    draw: '和棋',
    resign: '认输'
  };
  return statusMap[props.gameStatus] || '未知';
};

// 事件处理
const handleCellClick = (cellData) => {
  if (props.disabled) return;
  
  const { row, col, piece } = cellData;
  
  // 发送原始点击事件
  emit('cell-click', { row, col, piece });
  
  // 如果点击的是己方棋子，发送选择事件
  if (piece && piece.color === props.currentPlayer) {
    emit('piece-select', { row, col, piece });
  }
  
  // 如果已有选中棋子且点击的是有效移动位置，发送移动事件
  if (props.selectedPosition && isValidMove(row, col)) {
    emit('move', {
      from: { ...props.selectedPosition },
      to: { row, col }
    });
  }
};
</script>

<style scoped src="@/styles/chess/ChessBoard.scss"></style>
